class Food {
  public element: HTMLElement

  constructor() {
    this.element = document.getElementById('food')!
  }

  // 食物的X坐标
  get X() {
    return this.element.offsetLeft
  }

  // 食物的Y坐标
  get Y() {
    return this.element.offsetTop
  }

  // 改变食物的位置
  change() {
    // 生成一个随机的位置
    // 舞台是300*300，食物是10*10，所以食物的位置范围[0,290]
    // 蛇一次移动一格，一格为10px
    // Math.random() => (0, 1)的随机数
    // Math.round(Math.random()) => [0, 1]的随机数
    let top = Math.round(Math.random() * 29) * 10
    let left = Math.round(Math.random() * 29) * 10
    this.element.style.left = `${left}px`
    this.element.style.top = `${top}px`
  }
}


export default Food